<template>
  <view class="main">
    <template v-if="addressList.length > 0">
      <view class="addressBox" v-for="(item, index) in addressList" :key="index">
        <view class="nameBox">
          <view class="nBox">{{ item.userName[0] }}</view>
          <view class="nameInfo">
            <view class="f">
              <text>{{ item.userName }}</text>
              {{ item.cell }}
            </view>
            <view class="s">{{ item.address }}</view>
          </view>
        </view>
        <view class="mrdzBox">
          <u-radio-group v-model="item.flg" v-if="item.flg === '1'">
            <u-radio label="默认地址" name="1" activeColor="#80d8cf"></u-radio>
          </u-radio-group>
          <view v-else></view>
          <view style="display: flex">
            <u-icon name="trash" style="margin-right: 20rpx" color="#BFBFBF" size="25" @click="deleteItem(item)"></u-icon>
            <u-icon name="edit-pen" color="#BFBFBF" size="25" @click="goPage(item)"></u-icon>
          </view>
        </view>
      </view>
    </template>
    <u-empty mode="list" v-else></u-empty>
    <view class="bottomBox">
      <u-button text="添加地址" @click="goPage" shape="circle" color="#80d8cf"></u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { deleteUserAddress, selectAddressLst } from "@/api/my";
import { onBeforeMount, ref } from "vue";
const addressList = ref<any[]>([]);

onBeforeMount(() => {
  getAddressList();
});
const getAddressList = async () => {
  const res = await selectAddressLst({ userId: uni.getStorageSync("userId") });
  addressList.value = res.addressList;
};
const goPage = (item?: any) => {
  uni.redirectTo({
    url: `/pages/myPage/addAddress?addressItem=${JSON.stringify(item)}`,
  });
};
const deleteItem = async (item: any) => {
  uni.showModal({
    title: "提示",
    content: "您确定要删除该地址吗",
    success: async function (res) {
      if (res.confirm) {
        await deleteUserAddress({ Id: item.id });
        uni.showToast({
          title: "删除成功",
          icon: "success",
          position: "top",
          success() {
            getAddressList();
          },
        });
      }
    },
  });
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 20rpx;
}
.addressBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  .nameBox {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 34rpx;
    .nBox {
      width: 64rpx;
      height: 64rpx;
      background: #80d8cf;
      border-radius: 50%;
      margin-right: 24rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      color: #fff;
    }
    .nameInfo {
      .f {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        line-height: 36rpx;
        text {
          margin-right: 24rpx;
        }
      }
      .s {
        font-size: 26rpx;
        color: #bebebe;
        line-height: 36rpx;
        margin-top: 8rpx;
      }
    }
  }
  .mrdzBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
  }
}
</style>
